<template>
	<view class="dlBody" >
		
		<view class="dlDiv">
			
			 <view class="logos">
				 <image class="logo1" src="../../static/image/logoBK.png" mode=""></image>
			 </view>
			<view class="userDetails">
				<view class="Items">
					<text class="titles">账号</text>
					<input class="inputClass" placeholder-class="inputs" placeholder="手机号"  v-model="name" />
				</view>
				
				<view class="Items">
					<text class="titles">密码</text>
					<input class="inputClass"  placeholder-class="inputs" :password="true" placeholder="密码"  v-model="passWord" />
				</view>
				
				<view class="Items" v-if="showCodetype">
					<text class="titles">验证码</text>
					<input class="inputClass" style="width:300rpx;"  placeholder-class="inputs"  placeholder="4位验证码"  v-model="verifyCode" />
					<image class="yzmCode" :src="yzmCodeImg" @tap="showTimeTap" mode=""></image>
				</view>
				
			</view>  
			
			<view class="btns" @tap="userLogins" ref="piediv">登录</view>
			
			<view class="zc">
				<text class="zcText mr-30" @tap="ForgetPassword">忘记密码?</text>
				<view class="Hfgx"></view>
				<text class="zcText ml-30" @tap="go_Userzc">新用户注册</text>
			</view>
			
		<!-- 	<view id="script" style="border: 1px solid red;width:100%; height: 180px;">
				<image src="https://restapi.amap.com/v3/staticmap?location=106.550483,29.563707&zoom=10&size=200*200&markers=mid,,A:106.550483,29.563707&key=0adb19dd59608e138c3fffcff736b29f"></image>
			</view> -->
		</view>
		
		<view class="dl_fiexd">
			<div @click="open">
				更多选项
			</div>
		</view>
		<popus ref="alerts">
			<div :style="'width:' + defaultPhoneWidth">
				<div class="dl_alert" @click="alert_open">
					私有云设置
				</div>
			</div>
		</popus>
	</view>
</template>

<script>
	
	
	
	import JSEncrypt from 'jsencrypt/bin/jsencrypt.min.js';
	import {getPublicKey,UserLogin} from '@/common/api/table.js';
	import popus from '@/uni_modules/uni-popup/components/uni-popup/uni-popup'	
	import {sqe} from '@/common/api/http.js'
	export default {
		components:{
			popus
		},
		data(){
			return{
				name:'',
				passWord:'', 
				verifyCode:'',
				yzmCodeImg:'',
				showCodetype:false,
				backType:'',
				topstyles: '',
				defaultPhoneWidth:'',
				nowPhoneHeight: '',
				heigs:'',
				class_style: '',
				class_styl:'',
				city_name: [],
			}
		},
		
		onLoad(e) {
			//注册成功后，跳到登录，接受账号密码
			if('userObj' in  e){
				let obj = JSON.parse(e.userObj);
				if(obj){
				    this.name = obj.phone;
				    this.passWord = obj.password;
					//有type证明是登录过期，需要返回上一页面
					if('type' in obj){
						this.backType = obj.type; 
					}
				}	
			}
			
		// this.loadScrpit()
			
		},
		mounted() {
			let _this = this;
			// 获取手机宽度
			uni.getSystemInfo({
			    success: function (res) {
					_this.defaultPhoneWidth = res.windowWidth + 'px';
			    }
			})
			
			
			
			
			
		},
		methods:{
			
		// loadScrpit(){
		// 	var script = document.createElement('script');
			
		// 	script.src = 'https://restapi.amap.com/v3/staticmap?location=116.481485,39.990464&zoom=10&size=750*300&markers=mid,,A:116.481485,39.990464&key=0adb19dd59608e138c3fffcff736b29f';
		// 	document.body.appendChild(script);
		// },
			
			open() {
				uni.navigateTo({
					url: "/components/user/user-set"
				})
			     // this.$refs.alerts.open('center')
			},
			
			alert_open(){
				uni.navigateTo({
					url: "/components/user/user-set"
				})
			},
			
			ForgetPassword(){
				uni.navigateTo({
					url:'forGet-UserPassWord'
				})
			},
			
			//从新获取验证图片
			showTimeTap(){
				let apiurl = uni.getStorageSync('serverUrl');
				// if(this.time==''){
				// 	uni.showToast({
				// 		title:'请输入手机号',
				// 		icon:'none'
				// 	})
				// 	return;
				// }else{
				// 	//验证手机号 
				// 	var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				// 	if (!myreg.test(this.name)) {
				// 		uni.showToast({
				// 			title:'输入手机号不正确',
				// 			icon:'none'
				// 		})
				// 		return;
				// 	} else {
						var timestamp = Date.parse(new Date());
						this.yzmCodeImg ='';
						this.yzmCodeImg = `${apiurl}/verifyCode/loginImageCode?timestamp=${timestamp}&userPhone=${this.name}`;
					// }
				// }
			},
			
			
			go(){
				uni.navigateTo({
					url:'../../pages/index/index'
				})
			},
			go_Userzc(){
				uni.navigateTo({
					url:'user-zc'
				})
			},
			
			//获取共钥
			userPublicKey(){
				return new Promise((resolve, reject)=>{
					getPublicKey()
					.then(res=>{
						resolve(res.data);
					})
				})
			},
			
		   async userLogins(){
				if(this.name==''){
					uni.showToast({
						title:'用户名不能为空',
						icon:'none'
					})
					return;
				};
				if(this.passWord==''){
					uni.showToast({
						title:'密码不能为空',
						icon:'none'
					})
					return;
				};
				// if(this.showCodetype==true){
				// 	if(this.verifyCode==''){
				// 		uni.showToast({
				// 			title:'验证码不能为空',
				// 			icon:'none'
				// 		})
				// 		return;
				// 	}
				// };
				
				//验证手机号
				// var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				// if (!myreg.test(this.name)) {
				// 	uni.showToast({
				// 		title:'输入手机号不正确',
				// 		icon:'none'  
				// 	})
				// } else {
					let publicKey = await this.userPublicKey();
					let jsencrypt = new JSEncrypt();
					jsencrypt.setPublicKey(publicKey);
					let obj ={
						userName:jsencrypt.encrypt(this.name),
						password:jsencrypt.encrypt(this.passWord),
						verifyCode:this.verifyCode,
					 };
					 uni.showLoading({title: '登录中...' });
					 UserLogin(obj).then(res=>{ 
						uni.hideLoading();
						if(res.statusCode==200){
							//登录存用户信息
							uni.setStorageSync('userAccount',{name:this.name,passWord:this.passWord,type:1});
							// uni.showToast({
							// 	title:'登录成功',
							// 	icon:'none'
							// });
							setTimeout(()=>{
								//1.新用户登录  2.token过期登录backType==1,返回上一页面
								if(this.backType==1){
									uni.navigateBack({
										delta:1
									});
								}else{
									uni.switchTab({
										url:'../../pages/index/index'
									})
								}
							},1500)
						}else{
							//3次以上错误需要填写验证码.c从新获取验证图片
							this.showCodetype = true;
							this.showTimeTap();
						}
					})
				// }
			}
		}
	}
</script>

<style scoped lang="scss">
	.dl_alert {
		width: 90%;
		margin: auto;
		background-color: #fff;
		padding: 20px 0 20px 30rpx;
		border-radius: 4px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}
	
	// 弹窗底部文字
	.dl_fiexd{
		position: fixed;
		bottom: 3%;
		width: 100%;
		text-align: center;
	}
	
	.user_style {
		padding: 5px 10px 5px 10px;
		background-color: #0066CC;
		color: #fff;
		border-radius: 4px;
	}
	.topsa {
		border: 1px solid red;
	}
	.dlBody{
		width:750rpx;
		height:100vh;
		background-color:white;
	}
	.dlDiv{
		width: 100%;
	}
	.logos{
		padding-top:10%;
		// margin-bottom:60rpx; 
		width:750rpx;
		display:flex;
		flex-direction:row;
		justify-content:center;
		.logo1{
			width:350rpx;
			height:100rpx;
		}
	}
	.userText{
		width:750rpx;
		text-align:center;
		margin-bottom:60rpx;
	}
	.userDetails{
		width:750rpx;
		background-color:white;
		.Items{
			width:750rpx;
			height:100rpx;
			display:flex;
			align-items:center;
			flex-direction:row;
			border-bottom:1rpx solid #C8C7CC;
			.titles{
				font-size:30rpx;
				width:140rpx;
				text-align:start;
				margin-left:30rpx;
			}
			.inputs{
				font-size:30rpx;
				color:#C8C7CC;
			}
			.inputClass{
				width:500rpx;
				border: 0;
				// height:100rpx;
			}
			.yzmCode{
				width:150rpx;
				height:100rpx;
			}
		}
	}
	.btns{
		width:690rpx;
		height:80rpx;
		text-align:center;
		line-height:80rpx;
		color:white;
		background-color:#003bfe; 
		border-radius:15rpx;
		margin:0 auto;
		margin-top:40rpx;
	}
	.zc{
		margin:0 auto;
		margin-top:30rpx;
		width:690rpx;
		display:flex;
		align-items:center;
		justify-content:center;
		.Hfgx{
			width:5rpx;
			height:30rpx;
			background-color:black;
			border-radius:15rpx;
		}
		.zcText{
			color:#003bfe;
			font-size:30rpx;
		}
	}
	.mr-30{
		margin-right:30rpx;
	}
	.ml-30{
		margin-left:30rpx;
	}
	.user_que {
		display: flex;
		justify-content: space-around;
		
	}
</style>
